<template>
  	<view class="topTabbar flex a_center" :style="{background: background}">
		<view class="statuBar" :style="{height: `${navBarData.statusBarH}px`}"/>
		<view class="left" >
			<image src="/static/tabbar/back.png"  class="leftArrow" @click="handleBack"/>
		</view>
		<view class="title">
			{{props.title}}
			<span v-if="subTitle" class="subTitle">{{props.subTitle}}</span>
		</view>
	</view>
	<view class="size" />
</template>

<script setup>
const app = getApp()
import { ref, reactive, onMounted, onUnmounted } from 'vue';
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	subTitle: {
		type: String,
		default: false
	},
    background: {
		type: String,
		default: 'rgba(0,0,0,0)'
	}
})
onMounted(()=>{
	const { statusBarH, navBarH, contentMr } = app.globalData.navData
	navBarData.h =  navBarH
	navBarData.statusBarH = statusBarH,
	navBarData.mr = contentMr
})
const navBarData = reactive({
	h: '',
	statusBarH: '',
	mr: 0
})
const handleBack = () => {
	uni.navigateBack();
}
</script>

<style lang="scss">
	.topTabbar{
		height: 88rpx;
		width: 100vw;
		font-size: 40rpx;
		color: #252E3D;
		font-weight: normal;
		position: fixed;
		top: 0;
        .left{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
		.leftArrow{
            position: absolute;
			left: 32rpx;
			width: 48rpx;
			height: 48rpx;
			top: 20rpx;
		}
		.title{
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 88rpx;
			.subTitle{
				font-weight: 400;
				font-size: 24rpx;
				color: #798195;
				margin-top: 8rpx;
			}
		}
	}
	.size{
		margin-top: 88rpx;
		height: 88rpx;
	}

</style>